<template>
  <div>
    <!-- Table 表格组件。用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 -->
    <el-table tooltip-effect="dark" style="width: 100%" border :data="records">
      <el-table-column type="index" label="序号" width="80px" align="center" />
      <el-table-column prop="skuName" label="名称" width="width" />
      <el-table-column prop="skuDesc" label="描述" width="width" />
      <el-table-column label="默认图片" width="120">
        <template slot-scope="{row, $index}">
          <img :src="row.skuDefaultImg" alt="" title="" style="width: 40px">
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" width="width" />
      <el-table-column prop="price" label="价格" width="width" />
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{row, $index}">
          <el-row>
            <el-button v-if="row.isSale === 0" type="success" icon="el-icon-sort-down" size="mini" @click="sale(row)" />
            <el-button v-else type="success" icon="el-icon-sort-up" size="mini" @click="cancel(row)" />
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(row)" />
            <el-button type="info" icon="el-icon-info" size="mini" @click="getSkuInfo(row)" />
            <el-button type="danger" icon="el-icon-delete" size="mini" />
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <!-- Pagination 分页组件。当数据量过多时，使用分页分解数据。 -->
    <!--
      layout    属性，表示需要显示的内容，用逗号分隔，布局元素会依次显示。
      prev      属性，表示上一页，
      next      属性，表示下一页，
      pager     属性，表示页码列表，
      jumper    属性，表示跳页元素，
      total     属性，表示总条目数，
      sizes     属性，用于设置每页显示的页码数量。
      提示：除此以外还提供了jumper和total，sizes和特殊的布局符号->，->后的元素会靠右显示。
    -->
    <el-pagination
      style="text-align: center"
      background
      :total="total"
      :current-page="page"
      :page-sizes="[7, 14, 21, 28]"
      :page-size="limit"
      layout="prev, pager, next, jumper, ->, total, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- Drawer 抽屉组件。默认方向：从右到左。有些时候 Dialog 组件并不满足我们的需求，比如你的表单很长，亦或是你需要临时展示一些文档，Drawer 拥有和 Dialog 几乎相同的 API，在 UI 上带来不一样的体验。 -->
    <el-drawer title="我是标题" :visible.sync="show" :direction="direction" :with-header="true" :before-close="handleClose">
      <el-row>
        <el-col :span="5">名称</el-col>
        <el-col :span="16">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">描述</el-col>
        <el-col :span="16">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">价格</el-col>
        <el-col :span="16">{{ skuInfo.price }}.00元</el-col>
      </el-row>
      <el-row>
        <el-col :span="5">平台属性</el-col>
        <el-col :span="16">
          <template>
            <el-tag v-for="(attr) in skuInfo.skuAttrValueList" :key="attr.id" type="success" style="margin-right: 10px">{{ attr.attrId }}-{{ attr.valueId }}</el-tag>
          </template>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5">商品图片</el-col>
        <el-col :span="16">
          <!-- Carousel 走马灯组件。在有限空间内，循环播放同一类型的图片、文字等内容。 -->
          <el-carousel height="150px">
            <el-carousel-item v-for="(item) in skuInfo.skuImageList" :key="item.id">
              <img :src="item.imgUrl" alt="lww" title="LiuWeiWei">
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'SkuView',
  data() {
    return {
      // 当前第几页
      page: 1,
      // 当页多少条
      limit: 7,
      // 初始化表单数据
      records: [],
      // 总条数
      total: 0,
      // 抽屉组件显示与隐藏
      show: false,
      // 控制抽屉的方向
      direction: 'rtl',
      // 抽屉显示数据
      skuInfo: {}
    }
  },
  mounted() {
    this.getSkuList()
  },
  methods: {
    async getSkuList() {
      // 解构出默认的参数或者对象
      const { page, limit } = this
      const result = await this.$API.sku.reqSkuList(page, limit)
      if (result.code === 200) {
        this.total = result.data.total
        this.records = result.data.records
      }
    },
    // 当前第几页
    handleCurrentChange(val) {
      console.log(`当前第 ${val} 页`)
      this.page = val
      this.getSkuList()
    },
    // 每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this.getSkuList()
    },
    // 上架
    async sale(row) {
      const result = await this.$API.sku.reqSale(row.id)
      if (result.code === 200) {
        row.isSale = 1
        this.$message({ type: 'success', message: '上架成功' })
      }
    },
    // 下架
    async cancel(row) {
      const result = await this.$API.sku.reqCancel(row.id)
      if (result.code === 200) {
        row.isSale = 0
        this.$message({ type: 'success', message: '下架成功' })
      }
    },
    // 编辑
    edit() {
      this.$message('正在开发中')
    },
    // 获取SKU详情的方法
    async getSkuInfo(row) {
      // 展示抽屉
      this.show = true
      // 获取SKU数据
      const result = await this.$API.sku.reqSkuById(row.id)
      if (result.code === 200) {
        this.skuInfo = result.data
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    }
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

<style scoped>
.el-row .el-col-5 {
  font-size: 18px;
  text-align: right;
}

.el-col {
  margin: 10px 10px;
}

/**
  深度选择器：
  1. scoped 属性的作用是，只是对于当前的组件的样式有效果。
  2. 如果给style标签添加上了scoped属性，相当于给当前组件的结构中都添加上了一个data-v-xxx自定义属性。
  3. 会发现Vue是通过属性选择器，给需要添加的元素添加上样式的h3[data-v-7ba5bd90]。
  4. 子组件的根标签（拥有父组件当中自定义属性：一样的），如果子组件的根节点，和父组件中书写的样式相同，也会添加上相应的样式。
  5. 如果父组件的样式（Scoped），而且还想影响到子组件的样子，则需要使用【深度选择器】。
  6. 深度选择器分类：
  6.1. CSS    >>>
  6.2. LESS   /deep/
  6.3. SCSS   ::v-deep
 */
>>> .el-carousel__button {
  width: 10px;
  height: 10px;
  background: darkslateblue;
  border-radius: 50%;
}
</style>

